<!--左侧导航栏-->
<template>
  <div>
    <el-row class="tac">

        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="height: 100vh"
          :router='true'>

          <el-menu-item index="/Try">
            <i class="el-icon-reading"></i>
            <span slot="title">词霸</span>
          </el-menu-item>
          <el-menu-item index="/Homepage">
            <i class="el-icon-location"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/ReciteWord">
            <i class="el-icon-menu"></i>
            <span slot="title">背单词</span>
          </el-menu-item>
          <el-menu-item index="/ReviewWord">
            <i class="el-icon-document"></i>
            <span slot="title">我要复习</span>
          </el-menu-item>
          <el-menu-item index="/Plan">
            <i class="el-icon-setting"></i>
            <span slot="title">计划制定</span>
          </el-menu-item>
          <el-menu-item index="/UserInformation">
            <i class="el-icon-user"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>

    </el-row>
  </div>
</template>

<script>
export default {
  name: "Left",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>
